<template>
    <div class="ueditor-wrap">
        <script
            id="editor"
            type="text/plain"
        />
    </div>
</template>
<script>
export default {
    name: 'UE',
    data() {
        return {
            editor: null
        };
    },
    // head() {
    //     return {
    //         script: [
    //             { src: '/lib/UEditor/third-party/jquery-1.10.2.min.js' },
    //             { src: '/lib/UEditor/ueditor.config.js' },
    //             { src: '/lib/UEditor/ueditor.all.js' },
    //             { src: '/lib/UEditor/lang/zh-cn/zh-cn.js' },
    //             { src: '/lib/UEditor/ueditor.parse.min.js' }
    //         ],
    //     };
    // },
    props: {
        defaultValue: {
            type: String,
            default: '',
        },
        config: {
            type: Object,
            default: function () {
                return {
                    isReady: false,
                    // toolbars: [
                    //     ['fullscreen', 'source','|', 'undo', 'redo','|','bold', 'italic', 'underline', 'fontborder', 'strikethrough',
                    //         '|','superscript','subscript','|', 'forecolor', 'backcolor','|', 'removeformat','|', 'insertorderedlist', 'insertunorderedlist',
                    //         '|','selectall', 'cleardoc','fontfamily','fontsize','justifyleft','justifyright','justifycenter','justifyjustify','|',
                    //         'link','unlink'
                    //     ]
                    // ],
                    toolbars: [
                        [
                            // 'source', //源代码
                            // 'anchor', //锚点
                            'undo', //撤销
                            'redo', //重做
                            '|',
                            'formatmatch', //格式刷
                            'bold', //加粗
                            'indent', //首行缩进
                            // 'snapscreen', //截图
                            'italic', //斜体
                            'underline', //下划线
                            'strikethrough', //删除线
                            // 'subscript', //下标
                            // 'fontborder', //字符边框
                            // 'superscript', //上标
                            'blockquote', //引用
                            // 'pasteplain', //纯文本粘贴模式
                            // 'selectall', //全选
                            // 'print', //打印
                            // 'preview', //预览
                            'horizontal', //分隔线
                            // 'time', //时间
                            // 'date', //日期
                            'link', //超链接
                            'unlink', //取消链接
                            // 'cleardoc', //清空文档
                            // 'insertcode', //代码语言
                            'fontfamily', //字体
                            'fontsize', //字号
                            'paragraph', //段落格式
                            // 'spechars', //特殊字符
                            'searchreplace', //查询替换
                            // 'map', //Baidu地图
                            // 'gmap', //Google地图
                            // 'insertvideo', //视频
                            // 'help', //帮助
                            'justifyleft', //居左对齐
                            'justifyright', //居右对齐
                            'justifycenter', //居中对齐
                            'justifyjustify', //两端对齐
                            'forecolor', //字体颜色
                            'backcolor', //背景色
                            'insertorderedlist', //有序列表
                            'insertunorderedlist', //无序列表
                            'directionalityltr', //从左向右输入
                            'directionalityrtl', //从右向左输入
                            'lineheight', //行间距
                            'rowspacingtop', //段前距
                            'rowspacingbottom', //段后距
                            'pagebreak', //分页
                            // 'insertframe', //插入Iframe
                            'imagenone', //默认
                            'imageleft', //左浮动
                            'imageright', //右浮动
                            // 'attachment', //附件
                            'imagecenter', //居中
                            // 'wordimage', //图片转存
                            'lineheight', //行间距
                            // 'edittip ', //编辑提示
                            // 'customstyle', //自定义标题
                            // 'autotypeset', //自动排版
                            // 'webapp', //百度应用
                            // 'touppercase', //字母大写
                            // 'tolowercase', //字母小写
                            'background', //背景
                            'template', //模板
                            // 'scrawl', //涂鸦
                            // 'music', //音乐
                            // 'drafts', // 从草稿箱加载
                            // 'charts', // 图表
                            'removeformat', //清除格式
                            '|',
                            'simpleupload', //单图上传
                            // 'insertimage', //多图上传
                            'emotion', //表情
                            'inserttable', //插入表格
                            'insertparagraphbeforetable', //"表格前插入行"
                            'insertrow', //前插入行
                            'insertcol', //前插入列
                            'mergeright', //右合并单元格
                            'mergedown', //下合并单元格
                            'deleterow', //删除行
                            'deletecol', //删除列
                            'splittorows', //拆分成行
                            'splittocols', //拆分成列
                            'splittocells', //完全拆分单元格
                            'deletecaption', //删除表格标题
                            'inserttitle', //插入标题
                            'mergecells', //合并多个单元格
                            'edittable', //表格属性
                            'edittd', //单元格属性
                            'deletetable', //删除表格
                            'fullscreen', //全屏
                        ]
                    ],
                    autoHeightEnabled: true,
                    autoFloatEnabled: false,//是否工具栏可浮动
                    initialContent: '请输入内容', //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
                    autoClearinitialContent: false, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
                    initialFrameWidth: 750,
                    initialFrameHeight: 250,
                    UEDITOR_HOME_URL: '/lib/UEditor/'
                };
            }
        }
    },
    mounted() {
        const _this = this;

        this.editor = UE.getEditor('editor', this.config); // 初始化UE
        this.editor.addListener("ready", function () {
            _this.isReady = true;
            _this.editor.setContent(_this.defaultValue); // 确保UE加载完成后，放入内容。
        });

        window.uploadImage = (options) => {
            if (options.begin) {
                options.begin();
            }
            this.$upload({
                url: '/EcommerceAlipay/uploadPicture',
                data: options.formData,
                success: resp => {
                    if (resp.code == 1) {
                        options.success(resp.data.url);
                    } else {
                        options.fail(resp.msg);
                    }
                }
            });
        };
    },
    methods: {
        getUEContent() { // 获取内容方法
            return this.editor.getContent();
        },
        setContent(content){
            if(this.isReady){
                this.editor.setContent(content);
            }
        },
        getUeContentTxt(){
            return this.editor.getContentTxt();
        }
    },
    beforeDestroyed() {
        this.editor.destroy();
    }
};
</script>
<style lang="less">
  .edui-box {
    line-height: 20px !important;
  }
</style>